<template>
  <div class="login-container">
    <!-- 广告模块 -->
    <div class="advertisement">
      <h2>校园后勤服务，便捷你的生活！</h2>
      <p>提供全方位的校园后勤解决方案，让你无后顾之忧。</p>
    </div>
    <div class="form-container">
      <el-form class="login-form" size="large" :model="adminForm">
        <div class="title-container">
          <h3>校园后勤服务后台</h3>
        </div>
        <el-form-item>
          <el-input :prefix-icon="User" type="text" v-model="adminForm.adminName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input :prefix-icon="Lock" type="password" v-model="adminForm.adminPassword"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <div class="codeImg">
          <el-input class="input" v-model="codeImgNumber" type="text" placeholder="验证码"></el-input>
          <img @click="refreshCodeImg" :src="codeImgUrl" alt="验证码"/>
        </div>
        <el-form-item label="记住我">
          <el-switch v-model="adminForm.rememberMe"/>
        </el-form-item>
        <!-- 由于el-button是放在表单里，默认是会实现表单的跳转，需要用@click.native.prevent阻止 -->
        <el-button class="button" type="primary"
                   @click.native.prevent="handleLogin">登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from "vue-router";
import sysAxios from "@/api/sys.js";
import { useDataStore } from "@/stores/dataStore.js";
import { Lock, User } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const dataStore = useDataStore();
const router = useRouter();

/**
 * 登录
 */
// 用户表单
const adminForm = reactive({
  adminName: '',
  adminPassword: '',
  rememberMe: false,
});

// 处理登录逻辑
const handleLogin = () => {
  if ((codeImgNumber.value === "0413" && codeImgUrl.value === codeImgList[0].url) || (codeImgNumber.value === "5374" && codeImgUrl.value === codeImgList[1].url)) {
    if (adminForm.adminName.length >= 1 || adminForm.adminPassword.length >= 1) {
      http_login(adminForm.adminName, adminForm.adminPassword);
    } else {
      ElMessage.error('账号密码不能为空');
    }
  } else {
    ElMessage.error('验证码错误');
  }
};

// 发送登录请求
const http_login = (username, password) => {
  sysAxios.sys_login({
    username: username,
    password: password,
    "remember-me": true
  }).then(res => {
    if (res.data.code === 200) {
      dataStore.adminName = res.data.data.username;
      sysAxios.admin_findByAdminName({
        adminName: res.data.data.username
      }).then(res => {
        dataStore.adminId = res.data.data.adminId;
        dataStore.adminImg = res.data.data.adminImg;
      });
      dataStore.islogin = true;
      router.push("/sys/admin");
    } else {
      ElMessage.error(res.data.message);
    }
  });
};

/**
 * 验证码生成
 */
// 验证码输入
const codeImgNumber = ref('');
// 验证码图片链接
const codeImgUrl = ref('');

// 页面挂载时初始化验证码图片
onMounted(() => {
  codeImgUrl.value = codeImgList[0].url;
});

// 刷新验证码图片
const refreshCodeImg = () => {
  ElMessage.success("刷新验证码成功");
  if (codeImgUrl.value === codeImgList[0].url) {
    codeImgUrl.value = codeImgList[1].url;
  } else {
    codeImgUrl.value = codeImgList[0].url;
  }
};

// 验证码图片列表
const codeImgList = reactive([
  {
    name: '1',
    url: "https://img1.baidu.com/it/u=1070984255,945844267&fm=253&fmt=auto&app=138&f=PNG?w=491&h=236",
    value: '0413'
  },
  {
    name: '2',
    url: "https://bpic.588ku.com/element_origin_min_pic/01/37/32/26573c46f211bc8.jpg",
    value: '5374'
  },
]);
</script>

<style scoped lang="scss">
.login-container {
  display: flex;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  align-items: center;
  justify-content: space-around;

  .advertisement {
    width: 40%;
    padding: 20px;
    text-align: center;
    color: white;

    h2 {
      font-size: 36px;
      margin-bottom: 20px;
    }

    p {
      font-size: 18px;
    }
  }

  .form-container {
    width: 400px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

    .login-form {
      padding: 40px;

      .title-container {
        font-size: 30px;
        color: #fff;
        text-align: center;
        margin-bottom: 30px;
      }

      .button {
        width: 100%;
        margin-top: 30px;
        margin-bottom: 30px;
      }
    }
  }
}

.codeImg {
  display: flex;
  align-items: center;

  .input {
    flex: 1;
    margin-right: 10px;
  }

  img {
    cursor: pointer;
    width: 120px;
    height: 40px;
    border-radius: 5px;
  }
}
</style>
